import { Layout, Button, Input, Space, Typography, Menu } from 'antd';
import {
  SearchOutlined,
  ReloadOutlined,
  MonitorOutlined,
  MobileOutlined,
  MessageOutlined,
  FileTextOutlined,
  AppstoreOutlined,
  UserOutlined,
  PhoneOutlined,
  CalendarOutlined,
  CheckSquareOutlined,
  ThunderboltOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import { Outlet, Link } from 'react-router-dom';

const { Header, Sider, Content } = Layout;
const { Text } = Typography;

export default function App() {

  
  // 菜单项配置
  const menuItems = [
    {
      key: 'message',
      icon: <MessageOutlined />,
      label: <Link to='/app/chat'>消息</Link>,
    },
    {
      key: 'document',
      icon: <FileTextOutlined />,
      label: <Link to='/app/document'>文档</Link>,
    },
    {
      key: 'workbench',
      icon: <AppstoreOutlined />,
      label: '工作台',
    },
    {
      key: 'contacts',
      icon: <UserOutlined />,
      label: <Link to='/app/book'>通讯录</Link>,
    },
    {
      key: 'meeting',
      icon: <PhoneOutlined />,
      label: <Link to='/app/meeting'>会议</Link>,
    },
    {
      key: 'calendar',
      icon: <CalendarOutlined />,
      label: <Link to='/app/live'>直播</Link>,
    },
    {
      key: 'todo',
      icon: <CheckSquareOutlined />,
      label: '待办',
      badge: 1,
    },
    {
      key: 'ding',
      icon: <ThunderboltOutlined />,
      label: 'DING',
    },
    {
      key: 'add',
      icon: <PlusOutlined />,
      label: '添加',
    },
  ];

  return (
    <div>
      <Layout>
        <Header
          style={{
            background: '#e6f7ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '0 24px',
            height: '64px',
          }}
        >
          {/* 左侧：宏建按钮 + 兔飞猛进 */}
          <Space size='middle'>
            <Button
              type='primary'
              style={{
                borderRadius: '20px',
                background: '#1890ff',
                border: 'none',
                height: '32px',
                padding: '0 16px',
              }}
            >
              宏建
            </Button>
            <Space size='small'>
              <span style={{ fontSize: '20px' }}>🐰</span>
              <Text strong style={{ color: '#333' }}>
                兔飞猛进
              </Text>
            </Space>
          </Space>

          {/* 中间：搜索框 */}
          <div style={{ flex: 1, maxWidth: '400px', margin: '0 40px' }}>
            <Input
              placeholder='搜索(Ctrl+Shift+F)'
              prefix={
                <Space size='small'>
                  <ReloadOutlined style={{ color: '#999' }} />
                  <SearchOutlined style={{ color: '#999' }} />
                </Space>
              }
              style={{
                borderRadius: '20px',
                height: '36px',
              }}
            />
          </div>

          {/* 右侧：AI助理 + 图标 */}
          <Space size='large'>
            <Text strong style={{ color: '#1890ff', fontSize: '14px' }}>
              +/AI助理
            </Text>
            <MonitorOutlined style={{ fontSize: '18px', color: '#666' }} />
            <MobileOutlined style={{ fontSize: '18px', color: '#666' }} />
            {/* 右上角进度条指示器 */}
            <div
              style={{
                position: 'absolute',
                top: '0',
                right: '0',
                width: '4px',
                height: '100%',
                background: '#ff4d4f',
              }}
            />
          </Space>
        </Header>

        <Layout>
          <Sider
            width='10%'
            style={{
              background: '#f8f9fa',
              borderRight: '1px solid #e8e8e8',
            }}
          >
            <div style={{ padding: '16px 0', height: '100vh' }}>
              <Menu
                mode='inline'
                selectedKeys={['message']}
                style={{
                  background: 'transparent',
                  border: 'none',
                  fontSize: '14px',
                  color: '#333',
                }}
                items={menuItems.map(item => ({
                  key: item.key,
                  icon: item.icon,
                  label: (
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        width: '100%',
                      }}
                    >
                      <span>{item.label}</span>
                      {item.badge && (
                        <span
                          style={{
                            background: '#ff4d4f',
                            color: 'white',
                            borderRadius: '50%',
                            width: '16px',
                            height: '16px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            fontSize: '10px',
                            lineHeight: 1,
                          }}
                        >
                          {item.badge}
                        </span>
                      )}
                    </div>
                  ),
                }))}
              />
            </div>
          </Sider>
          <Content>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>
  );
}
